import {NavLink, Routes, Route, Navigate} from 'react-router-dom'
import TodoClass from './pages/Todo-Class'
import TodoHook from './pages/Todo-Hook'
import TodoRedux from './pages/Todo-Redux'
import Scroll from './pages/Scroll'
import Tree from './pages/Tree'
import './App.css'

function App() {
    function getClass(e) {
        return e.isActive ? 'active' : ''
    }
    return (
        <div className="App">
            <NavLink className={getClass} to="/todo-class">Class版Todo</NavLink>&nbsp;&nbsp;
            <NavLink className={getClass} to="/todo-hook">Hook版Todo</NavLink>&nbsp;&nbsp;
            <NavLink className={getClass} to="/todo-redux">Redux版Todo</NavLink>&nbsp;&nbsp;
            <NavLink className={getClass} to="/scroll">Scroll</NavLink>&nbsp;&nbsp;
            <NavLink className={getClass} to="/tree">Tree</NavLink>&nbsp;&nbsp;
            <Routes>
                <Route path="/todo-class" element={<TodoClass/>}/>
                <Route path="/todo-hook" element={<TodoHook/>}/>
                <Route path="/todo-redux" element={<TodoRedux/>}/>
                <Route path="/scroll" element={<Scroll/>}/>
                <Route path="/tree" element={<Tree/>}/>
                <Route path="/" element={<Navigate to="/todo-class"/>}/>
            </Routes>
        </div>
    )
}

export default App
